<template>
    <div class="recommend" ref="recommend" v-if='discList && discList.length'>
        <Scroll class="recommend-content" :data="discList" ref="scroll">
          <div>
            <div class="slider-wrapper">
               <swiper :options="swiperOption" ref="mySwiper">
                <swiper-slide class="swiper_img" v-for="item of recommends" :key="item.id"><img :src="item.picUrl" @load="loadImage"></swiper-slide>
                <div class="swiper-pagination"  slot="pagination"></div>
                </swiper>
            </div>
           <div class="recommend-list">
               <div class="list-title">
                   热门歌单
               </div>
              <ul v-show="discList.length">
                  <li v-for="item of discList" :key="item.dissid" class="item">
                   <div class="icon">
                       <img v-lazy="item.imgurl" width="60" height="60">
                   </div>
                   <div class="text">
                       <h2 class="name" v-html="item.creator.name"></h2>
                       <p class="desc" v-html="item.dissname"></p>
                   </div>
                  </li>
              </ul>
              <Loading v-show="!discList.length"></Loading>
           </div>
           </div>
        </Scroll>
    </div>
</template>
<script>
import {getRecommend,getDiscList}  from 'api/recommend'; 
import {ERR_OK}  from 'api/config'; 
import Slider  from 'base/slider/slider';
import Scroll from 'base/scroll/scroll'
import Loading from 'base/loading/loading'
export default { 
    data:function(){
      return {
           recommends:[],
           discList:[],
           swiperOption:{
            pagination:'.swiper-pagination',
            autoplay:3000,
            loop:true,
            autoplayDisableOnInteraction: false,
            stopOnLastSlide: false,
      }
    }
    },  
    components:{
      Slider,
      Scroll,
      Loading 
    },
    mounted(){
        this. _getRecommend()
        this._getDiscList()
    },
    methods:{
        _getRecommend(){
           getRecommend().then((res)=>{
               if(res.code==ERR_OK){
                   this.recommends=res.data.slider
               }
           }) 
        },
        _getDiscList(){
            getDiscList().then(res=>{
                this.discList=res.data.list
            })
        },
        loadImage(){
          if(!this.checkLoaded){
            // 只调用一次
            this.$refs.scroll.refresh()
            this.checkloaded = true
          }
        }
    }
}
</script>
<style lang="stylus" scoped>
@import "~common/stylus/variable";
.recommend
    position: fixed
    width: 100%
    top: 88px
    bottom: 0
    .recommend-content
      height: 100%
      overflow: hidden
      .slider-wrapper
        position: relative
        width: 100%
        overflow: hidden
        img
          width 100%
      .recommend-list
        .list-title
          height: 40px
          line-height: 64px
          font-size: $font-size-medium
          color: black
          width 100%
          margin-left 15px
          font-weight bold
        .item
          display: flex
          box-sizing: border-box
          align-items: center
          margin: 10px 20px 10px 20px
          padding-top:10px 
          border-bottom 1px solid #f4f5f6
          border-top 1px solid #e1e2e3
          .icon
            flex: 0 0 60px
            width: 60px
            padding-right: 20px
          .text
            display: flex
            flex-direction: column
            justify-content: center
            flex: 1
            line-height: 20px
            overflow: hidden
            font-size: $font-size-medium
            .name
              margin-bottom: 10px
              color: black
              font-size 16px
            .desc
              color: $color-text-d
              font-size 12px
      .loading-container
        position: absolute
        width: 100%
        top: 50%
        transform: translateY(-50%)
</style>